<script setup lang="ts">
import { RadioGroup } from "@ark-ui/vue/radio-group";

const ratings = [
  { value: "very-bad", emoji: "😠", label: "Very Bad" },
  { value: "bad", emoji: "🙁", label: "Bad" },
  { value: "neutral", emoji: "😐", label: "Neutral" },
  { value: "good", emoji: "🙂", label: "Good" },
  { value: "very-good", emoji: "😄", label: "Very Good" },
];
</script>

<template>
  <div class="space-y-4">
    <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
      How do you feel about this product?
    </h3>

    <RadioGroup.Root class="flex gap-2" default-value="">
      <RadioGroup.Item
        v-for="rating in ratings"
        :key="rating.value"
        :value="rating.value"
        class="flex flex-col items-center gap-2 cursor-pointer group"
      >
        <RadioGroup.ItemControl
          class="size-10 rounded-full border-2 border-gray-300 flex items-center justify-center text-md opacity-60 data-[state=checked]:opacity-100 data-[state=checked]:border-blue-500 hover:opacity-80 hover:border-gray-400 dark:border-gray-600 dark:data-[state=checked]:border-blue-500 dark:hover:border-gray-500 transition-all duration-200"
        >
          {{ rating.emoji }}
          <RadioGroup.ItemHiddenInput />
        </RadioGroup.ItemControl>

        <RadioGroup.ItemText
          class="text-xs font-medium text-gray-600 dark:text-gray-400 opacity-0 data-[state=checked]:opacity-100 transition-opacity"
        >
          {{ rating.label }}
        </RadioGroup.ItemText>
      </RadioGroup.Item>
    </RadioGroup.Root>
  </div>
</template>
